<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
		<!-- 设置字符编码集为国际编码 -->
		<meta charset="utf-8">
		<!-- IE兼容模式 通知 IE 采用其所支持的最新的模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<!-- 360,qq浏览器等多核浏览器，优先采用webkit -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<!-- 引入 Bootstrap -->
		<link href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
		
		<link rel="stylesheet" type="text/css" href="../../bootstrap-table-1.11.0-dist/bootstrap-table.min.css"/>
		
		<link rel="stylesheet" href="../datetime/daterangepicker-bs3.css" />
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="../jquery-1.11.3.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="../../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
		
		<script type="text/javascript" src="../../bootstrap-table-1.11.0-dist/bootstrap-table.min.js" ></script>
		<script type="text/javascript" src="../../bootstrap-table-1.11.0-dist/locale/bootstrap-table-zh-CN.min.js" ></script>
		
		<script src="../datetime/moment.js" type="text/javascript" charset="utf-8"></script>
		<script src="../datetime/daterangepicker.js" type="text/javascript" charset="utf-8"></script>
		<!-- 工具类 -->
		<script src="../util.js" type="text/javascript"></script>
		<style>
			.w30{width: 30px}
			
		</style>
	</head>
  <body>
	  	
	  	<div style="border:1px solid #999 ;width: 48%;float: left;margin-left: 1%;">
	  		<table id="table"
	  			data-initable='yes'
	  			   data-height="600"
	  			   data-checkevent="change"
	  			    class="table table-bordered table-bordered table-striped">
		  		<caption>caption</caption>
		  		<thead>
		  			<tr>
			  			<th colspan="5"><button id="bu" class="btn" type="button">button</button></th>
			  		</tr>
		  			<tr>
			  			<th class="w30"><input type="checkbox" id="abc" onclick="abc1(this);"  onchange="abc2(this);"/></th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  		</tr>
		  		</thead>
		  		<tbody>
		  			
		  		</tbody>
		  		<tfoot>
		  			<tr>
			  			<td><input type="checkbox" /></td>
			  			<td>tfoot1</td>
			  			<td>tfoot2</td>
			  			<td>tfoot3</td>
			  			<td>tfoot4</td>
			  		</tr>
		  		</tfoot>
	  		</table>
	  	</div>
	  	<div style="border:1px solid #999;width: 48%;float: left;margin-left: 2%;display: nonek;">
		  	<table id="table1"
	  			data-initable='yes'
	  			   data-height="600"
	  			   data-checkevent="click"
	  			    class="table table-bordered table-bordered table-striped">
		  		<caption>caption</caption>
		  		<thead>
		  			<tr>
			  			<th colspan="5"><button id="bu" class="btn" type="button">button</button></th>
			  		</tr>
		  			<tr>
			  			<th class="w30"><input type="checkbox" id="abc" onclick="abc1(this);"  onchange="abc2(this);"/></th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  		</tr>
		  		</thead>
		  		<tbody>
		  			
		  		</tbody>
		  		<tfoot>
		  			<tr>
			  			<td><input type="checkbox" /></td>
			  			<td>tfoot1</td>
			  			<td>tfoot2</td>
			  			<td>tfoot3</td>
			  			<td>tfoot4</td>
			  		</tr>
		  		</tfoot>
	  		</table>
	  	</div>
			<div id='toolBar' class="hide"><div>123</div></div>
			<div id='paginationId' class="hide"><div>456</div></div>
			
			<div class="maxTableWarper hide">
				<div class="maxTable_toolbar"></div>
				<div class="maxTable_caption">
					<table class="table table-bordered table-striped">
						<caption>caption</caption>
					</table>
				</div>
				<div class="maxTable_container">
					<div class="maxTable_header" style="width: 587px;">
						<table class="table table-bordered table-striped">
							<thead style="visibility: visible;">
				  			<tr style="height: 49px;">
					  			<th colspan="5" style="width: 586px;"><button class="btn" type="button">button</button></th>
					  		</tr>
				  			<tr style="height: 39px;">
					  			<th class="w30" style="width: 30px;"><input type="checkbox" class="js_maxheadCheck"></th>
					  			<th style="width: 130px;">Header</th>
					  			<th style="width: 164px;">Header</th>
					  			<th style="width: 131px;">Header</th>
					  			<th style="width: 131px;">Header</th>
					  		</tr>
			  			</thead>
						</table>
					</div>
					<div class="maxTable_body" style="margin-top: 88px; height: 469px;">
						<table class="table table-bordered table-striped" id="table" style="margin-top: -121px;">
		  				<caption>caption</caption>
				  		<thead style="visibility: hidden;">
				  			<tr>
					  			<th colspan="5"><button id="bu" class="btn" type="button">button</button></th>
					  		</tr>
				  			<tr>
					  			<th class="w30"><input type="checkbox" id="abc" onclick="abc(this);" onchange="abc(this);" class="js_maxbodyCheckTrigger"></th>
					  			<th>Header</th>
					  			<th>Header</th>
					  			<th>Header</th>
					  			<th>Header</th>
					  		</tr>
				  		</thead>
		  				<tbody>
		  					<tr>
		  						<td><input type="checkbox" class="js_maxbodyCheck"></td>
		  						<td class="opid">单号</td>
		  						<td>供应商编码</td>	
		  						<td>供应商</td>
		  						<td>1</td>
		  					</tr>
		  					<tr>
		  						<td><input type="checkbox" class="js_maxbodyCheck"></td>
		  						<td class="opid">单号</td>
		  						<td>供应商编码</td>	
		  						<td>供应商</td>
		  						<td>2</td>
		  					</tr>
		  				</tbody>
				  		<tfoot style="visibility: hidden;">
				  			<tr>
					  			<td><input type="checkbox"></td>
					  			<td>tfoot1</td>
					  			<td>tfoot2</td>
					  			<td>tfoot3</td>
					  			<td>tfoot4</td>
					  		</tr>
				  		</tfoot>
	  				</table>
					</div>
					<div class="maxTable_footer" style="width: 587px;">
						<table class="table table-bordered table-striped">
							<tfoot style="visibility: visible;">
				  			<tr>
					  			<td style="width: 30px;"><input type="checkbox"></td>
					  			<td style="width: 130px;">tfoot1</td>
					  			<td style="width: 164px;">tfoot2</td>
					  			<td style="width: 131px;">tfoot3</td>
					  			<td style="width: 131px;">tfoot4</td>
					  		</tr>
		  				</tfoot>
						</table>
					</div>
				</div>
				<div class="maxTable_pagination"></div>
				<div class="clearfix"></div>
			</div>
			
			
			
			
  </body>
  <script type="text/javascript" src="tableInit.js" ></script>
  <script>
  	$(function(){
  		setTimeout(function(){
  			for (var i=0;i<100;i++) {
	  			var tr ='<tr>'+
	  							'	<td><input type="checkbox" /></td>'+
									'	<td class="opid">单号</td>'+
									'	<td>供应商编码</td>'+
									'	<td>供应商</td>'+
									'	<td>'+(i+1)+'</td>'+
									'</tr>';
			  	$("tbody").append(tr);
	  		}
  		
  		},1000);
  		
  	
  	//new MaxTable($("#table1"))
			// 	MaxTableInit(); 	
		/*var wraper1 = $("<div class='wrap1'></div>")
		var wraper2 = $("<div class='wrap2'></div>")
		$("#table1").wrap(wraper2);
		$("#table1").parent().wrap(wraper1)*/
		
			$(document).on("click","#bu",function(){
  			alert("bu");
  		})
  		
  		$(".btn").on("click",function(e){
  			var ev = e || window.event;
  			ev.stopPropagation();
  			alert("btn")
  		})
		new MaxTableInit($("table"))
  	});
  	function abc1(obj){
  		alert("1-->"+"tbody--->"+$(obj).parents("table").find("tbody").length)
  	}
  	function abc2(obj){
  		alert("2-->"+"tbody--->"+$(obj).parents("table").find("tbody").length)
  	}
  </script>
</html>